<template>
  <div class="employee-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <i class="el-icon-info" />
          <span>本月: 社保在缴 公积金在缴</span>
        </template>
        <template #right>
          <el-button type="primary" size="small" @click="$router.push('/import')">导入excel</el-button>
          <el-button type="primary" size="small">导出excel</el-button>
          <el-button type="primary" size="small" @click="openDialog">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 表格 -->
      <el-card style="margin-top: 20px">
        <el-table
          :data="list"
          style="width: 100%"
          border
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            fixed="left"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="180"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
          />
          <el-table-column
            label="聘用形式"
          >
            <template #default="{ row }">
              {{ hireEnum[row.formOfEmployment] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门"
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            width="200"
          >
            <template #default="{ row }">
              {{ formatDate(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="200"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">分配角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            :current-page="params.page"
            :page-size="params.size"
            layout="prev, pager, next"
            :total="total"
            style="margin-top: 20px"
            @current-change="handleCurrentChange"
          />
        </el-row>

      </el-card>
      <add-dialog :dialog-visible="dialogVisible" @closeDialog="closeDialog" @get-employee-list="initData" />
    </div>
  </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '@/api/employee'
import dayjs from 'dayjs'
import addDialog from './components/addDialog.vue'
export default {
  components: { addDialog },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        size: 10
      },
      total: 0,
      hireEnum: {
        1: '正式',
        2: '非正式'
      },
      dialogVisible: false
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await getEmployeeList(this.params)
      this.list = res.data.rows
      this.total = res.data.total
    },
    formatDate(dateVal) {
      return dayjs(dateVal).format('YYYY-MM-DD')
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.initData()
    },
    openDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    delEmployee(id) {
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delEmployee(id)
        this.$message.success('删除员工成功')
        if (this.list.length === 1 && this.params.page > 1) {
          this.params.page--
        }
        this.initData()
      })
    }
  }
}
</script>

<style>

</style>
